<template>
  <div>
      <!-- 准备容器 -->
    <div ref="chart" style="width:100%;height:300px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core' //引入echarts5
import 'echarts/theme/macarons'  //图表主题

export default {
  data(){
    return {

    }
  },
  //监听国际化变化，重新初始化
  watch:{
      '$i18n.locale'(curV,oldV){
          this.init();
      }
  },
  mounted(){
      this.init();
  },
  methods:{
      init(){
          //初始化
          let myChart = echarts.init(this.$refs.chart);
          let option = {
                color:'#f60',
                title:{
                    text:this.$t('message.title'),  //标题
                    left:'center',  //居中
                    top:'3%'   //上间距
                },
                xAxis: { //x轴
                    type: 'category',
                    data: ['2010', '2020', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLine:{
                        lineStyle:{
                            color:'#333'
                        }
                    }
                },
                yAxis: {  //y轴
                    type: 'value',
                    axisLine:{
                        lineStyle:{
                            color:'#333'
                        }
                    }
                },
                grid:{  //位置
                    left:'2%',
                    right:'2%',
                    bottom:'5%',
                    containLabel:true
                },
                series: [
                    {
                        data: [555, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }
                ]
            };
          //设置渲染
          myChart.setOption(option);
      }
  }
}
</script>


